.application-data-board-container {
  width: 100%;
  margin: 20px 32px 32px;
  min-width: 800px;
  .board-header {
    display: flex;
    height: 32px;
    width: 100%;
    margin-bottom: 20px;
    align-items: center;
    gap: 16px;
    justify-content: space-between;
    .time-info {
      overflow: hidden;
      color: #7587a5;
      text-overflow: ellipsis;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 22px; /* 157.143% */
    }
    .custom-select-container {
      position: relative;
      display: inline-block;
      .fixed-content {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translate(8px, -50%);
        color: #999;
        z-index: 1;
        color: #7587a5;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px;
      }

      .period-select {
        .ant-select-selection-item,
        .ant-select-selection-placeholder,
        .ant-select-arrow {
          margin-left: 68px;
        }
      }
      .common-select {
        .ant-select-selection-item,
        .ant-select-selection-placeholder,
        .ant-select-arrow {
          margin-left: 40px;
        }
      }
    }
  }
  .board-main {
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    max-height: calc(100vh - 180px);
    overflow-y: auto;

    .chart-container {
      flex: initial;
      width: calc(50% - 16px);
      margin-bottom: 18px;
      border-radius: 6px;
      .ant-card {
        height: 368px;
        border-radius: 6px;
        .ant-card-body {
          padding: 16px;
        }
        .chart-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          align-self: stretch;
          .chart-title {
            color: #000000;
            font-size: 18px;
            font-style: normal;
            font-weight: 600;
            line-height: 26px;
          }
          .chart-title-sub {
            color: #7587A5;
            text-overflow: ellipsis;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 22px;
            padding-left: 16px;
            display: inline-block;
          }
          .chart-icons {
            display: flex;
            flex-direction: row;
            gap: 8px;
            justify-content: space-between;
            align-items: center;
          }
          .chart-icons-split {
            width: 1px;
            height: 14px;
            background: #dde3f2;
          }
        }
      }
    }
  }
}
